<template>
  <!-- hidden PageHeaderWrapper title demo -->
  <page-header-wrapper :title="false" content="安全设置">
    <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item v-show="false" label="ID">
          <a-input v-decorator="['id']" disabled />
        </a-form-item>
        <a-form-item
          label=""
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-checkbox v-model="enabled"> 启用分摊 </a-checkbox>
        </a-form-item>
        <a-form-item
          label=""
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-input v-decorator="['num']" v-show="enabled === true" addon-before="权重" addonAfter="分摊比例：0%" />
        </a-form-item>
        <a-divider />
        <a-form-item :wrapperCol="{ span: 16 }" style="text-align: center">
          <a-button htmlType="submit" type="primary" :loading="loading" icon="check">保存</a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getApportionmentSettingUsingPOST, updateApportionmentSettingUsingPOST } from '@/api/api/xitongguanli.ts'
export default {
  name: 'Safe',
  data() {
    return {
      form: this.$form.createForm(this),
      loading: false,
      enabled: false,
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getApportionmentSettingUsingPOST()
        .then((res) => {
          this.enabled = Number(res.data.value) < 0 ? false : true
          this.form.setFieldsValue({ num: res.data.value, id: res.data.id })
          console.log({ num: res.data.value, id: res.data.id })
        })
        .catch((error) => {
          this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
        })
    },
    // handler
    handleSubmit(e) {
      e.preventDefault()
      this.loading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values)
          const data = {
            value: this.enabled === true ? values.num : '-1',
          }
          updateApportionmentSettingUsingPOST({ ...data, id: values.id })
            .then(() => {
              this.$message.success('操作成功')
              this.loading = false
              this.fetchData()
            })
            .catch((error) => {
              this.loading = false
              this.$message.error(((error.response || {}).data || {}).msg || '请求出现错误')
            })
        }
      })
    },
  },
}
</script>
